<!DOCTYPE html>
<HTML>
<HEAD><meta name="viewport" content="width=device-width, initial-scale=1">
<Title>Multi-Color Line Chart</Title>
<link type='text/css' rel='Stylesheet' href="maxchartapi.css" />
</HEAD>
<body bgcolor="#FFFFFF" text="#000000" topmargin="0" leftmargin="0" rightmargin="0" marginwidth="0" marginheight="0">

<p class="heading0">ChartDirector 7.0 (Java Edition)</p>
<p class="heading1">Multi-Color Line Chart</p>
<hr class="separator">
<div class="content">
<img src="images/multicolorline.png" width='600' height='430'>
<br><br>
This example demonstrates a line chart with line segments of different colors.<br><br>
In this example, each line segment has a type specified in the pointType array. Note that with N data points, there will only be (N - 1) line segments. So the pointType array size is one less than the data point array size.<br><br>
A loop is used to separate the line segments by type into different line layers, The line layers are configured with different colors and names. This generates the multi-color line and the legend entries.
</div>
<p class="heading1a">Source Code Listing</p>
<div class="content">
<b>[JSP Version]</b> jspdemo/multicolorline.jsp
<div class='codeblock'><code class='pre'>&lt;%@page import="ChartDirector.*, java.util.*" %&gt;
&lt;%
// Data points for the line chart
double[] dataX = {0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22,
    23, 24, 25};
double[] dataY = {30, 28, 40, 55, 75, 68, 54, 60, 50, 62, 75, 65, 75, 89, 60, 55, 53, 35, 50, 66,
    56, 48, 52, 65, 62, 70};

// The data point type. The color of the line segment will be based on the starting point type of
// the segment. In this example, we have 4 point types for 4 different colors. Note that for a line
// with N points, there will be (N - 1) line segments, so we only need (N - 1) values in the point
// type array.
int[] pointType = {0, 0, 0, 1, 1, 0, 2, 3, 1, 1, 0, 0, 1, 1, 2, 2, 2, 3, 3, 2, 0, 1, 2, 3, 3};
int[] colors = {0xff0000, 0x0066ff, 0xcc00cc, 0x00cc00};
String[] pointTypeLabels = {"Alpha", "Beta", "Gamma", "Delta"};

// Create a XYChart object of size 600 x 430 pixels
XYChart c = new XYChart(600, 430);

// Set default text color to dark grey (0x333333)
c.setColor(Chart.TextColor, 0x333333);

// Add a title box using grey (0x555555) 20pt Arial font
c.addTitle("    Multi-Color Line Chart", "Arial", 20, 0x555555);

// Set the plotarea at (70, 70) and of size 500 x 300 pixels, with transparent background and border
// and light grey (0xcccccc) horizontal grid lines
c.setPlotArea(70, 70, 500, 300, Chart.Transparent, -1, Chart.Transparent, 0xcccccc);

// Add a legend box with horizontal layout above the plot area at (70, 35). Use 12pt Arial font,
// transparent background and border, and line style legend icon.
LegendBox b = c.addLegend(70, 35, false, "Arial", 12);
b.setBackground(Chart.Transparent, Chart.Transparent);
b.setLineStyleKey();

// Set axis label font to 12pt Arial
c.xAxis().setLabelStyle("Arial", 12);
c.yAxis().setLabelStyle("Arial", 12);

// Set the x and y axis stems to transparent, and the x-axis tick color to grey (0xaaaaaa)
c.xAxis().setColors(Chart.Transparent, Chart.TextColor, Chart.TextColor, 0xaaaaaa);
c.yAxis().setColors(Chart.Transparent);

// Set the major/minor tick lengths for the x-axis to 10 and 0.
c.xAxis().setTickLength(10, 0);

// For the automatic axis labels, set the minimum spacing to 80/40 pixels for the x/y axis.
c.xAxis().setTickDensity(80);
c.yAxis().setTickDensity(40);

// Add a title to the y axis using dark grey (0x555555) 14pt Arial font
c.xAxis().setTitle("X-Axis Title Placeholder", "Arial", 14, 0x555555);
c.yAxis().setTitle("Y-Axis Title Placeholder", "Arial", 14, 0x555555);

// In ChartDirector, each line layer can only have one line color, so we use 4 line layers to draw
// the 4 different colors of line segments.

// In general, the line segments for each color will not be continuous. In ChartDirector,
// non-continuous line segments can be achieved by inserting NoValue points. To allow for these
// extra points, we use a buffer twice the size of the original data arrays.
double[] lineX = new double[dataX.length * 2];
double[] lineY = new double[dataY.length * 2];

// Use a loop to create a line layer for each color
for(int i = 0; i &lt; colors.length; ++i) {
    int n = 0;
    for(int j = 0; j &lt; dataX.length; ++j) {
        // We include data points of the target type in the line layer.
        if ((j &lt; pointType.length) &amp;&amp; (pointType[j] == i)) {
            lineX[n] = dataX[j];
            lineY[n] = dataY[j];
            n = n + 1;
        } else if ((j &gt; 0) &amp;&amp; (pointType[j - 1] == i)) {
            // If the current point is not of the target, but the previous point is of the target
            // type, we still need to include the current point in the line layer, as it takes two
            // points to draw a line segment. We also need an extra NoValue point so that the
            // current point will not join with the next point.
            lineX[n] = dataX[j];
            lineY[n] = dataY[j];
            n = n + 1;
            lineX[n] = dataX[j];
            lineY[n] = Chart.NoValue;
            n = n + 1;
        }
    }
    // Draw the layer that contains all segments of the target color
    LineLayer layer = c.addLineLayer(Arrays.copyOfRange(lineY, 0, n), colors[i], pointTypeLabels[i])
        ;
    layer.setXData(Arrays.copyOfRange(lineX, 0, n));
    layer.setLineWidth(2);
}

// Output the chart
WebChartViewer viewer = new WebChartViewer(request, "chart1");
viewer.setChart(c, Chart.SVG);
%&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Multi-Color Line Chart&lt;/title&gt;
    &lt;!-- Include ChartDirector Javascript Library to support chart interactions --&gt;
    &lt;script type="text/javascript" src="cdjcv.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body style="margin:5px 0px 0px 5px"&gt;
    &lt;div style="font:bold 18pt verdana;"&gt;
        Multi-Color Line Chart
    &lt;/div&gt;
    &lt;hr style="border:solid 1px #000080; background:#000080" /&gt;
    &lt;div style="font:10pt verdana; margin-bottom:1.5em"&gt;
        &lt;a href="viewsource.jsp?file=&lt;%=request.getServletPath()%&gt;"&gt;View Source Code&lt;/a&gt;
    &lt;/div&gt;
    &lt;!-- ****** Here is the chart image ****** --&gt;
    &lt;%= viewer.renderHTML(response) %&gt;
&lt;/body&gt;
&lt;/html&gt;</code></div>
</div>
<br><hr class="separator"><div class="copyright">&copy; 2022 Advanced Software Engineering Limited. All rights reserved.</div>
</body>
</HTML>
